<template>
  <div>
  <div id="checkPlant">
    <el-dialog title="查看植物" :visible.sync="visible" top="0.5rem" :lock-scroll="false" :show-close="false" :close-on-click-modal="false">
      <el-form class="checkPlant" ref="plantForm" :model="plant" :rules="rules" label-width="100px">
        <el-col :span="24">
          <el-row>
            <el-col :span="18">
            <el-form-item>
          <div class="avatarlist" style="display:grid;justify-content:start">
            <el-upload
                class="avatar-uploader"
                name="img"
                :action="uploadURL"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img   v-if="plant.avatar" :src="plant.avatar?plant.avatar:'../../../assets/img/bgImg/plant3.png'" class="avatar" >
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">点击上传植物头像，只能上传jpg/png文件，且不超过1mb</div>
            </el-upload>
          </div>
        </el-form-item>
            </el-col >
            <el-col :span="6">
              <el-button type="text" icon="el-icon-edit" @click="setDisabled()">点击编辑植物信息
              </el-button>
            </el-col>
          </el-row>
          <el-row>
        <el-form-item label="植物名字:" prop="plantName" >
          <el-input v-model="plant.plantName"  placeholder="植物名字" clearable :disabled="isDisabled"/>
        </el-form-item></el-row>
          <el-row>
        <el-form-item label="种类："prop="category" label-width="100px">
          <el-select v-model="category_str" placeholder="种类" style="width: 100px;right: 200px" :disabled="isDisabled">
            <el-option
                v-for="item in plantCategoryList"
                :key="item.plantCategoryId"
                :label="item.plantCategoryName"
                :value="item.plantCategoryId">
            </el-option>
          </el-select>
        </el-form-item></el-row>
          <el-row>
            <el-form-item label="植物状态:" prop="plantStatus" label-width="100px">
              <el-select v-model="plant.status" placeholder="状态" style="width: 100px;right: 200px" :disabled="isDisabled">
              <el-option
                  v-for="item in plantStatusList"
                  :key="item"
                  :label="item"
                  :value="item">
              </el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
        <el-form-item label="备注：" prop="description">
          <el-input type="textarea" :rows="2" v-model="plant.description" resize="none" maxlength="200" show-word-limit palceholder="备注" :disabled="isDisabled"></el-input>
        </el-form-item></el-row>
        </el-col>
        <el-col>
        <el-row style="margin-bottom: 20px" type="flex" justify="end">
          <el-col>
          <div>
            <el-button type="primary" icon="el-icon-water-cup">浇水
            </el-button>
            <el-button type="warning" icon="el-icon-tableware">施肥
            </el-button>
          </div>
          </el-col>
          <el-col>
            <div>
              <el-button type="success" icon="el-icon-edit-outline" @click="$refs.writeDiaryDialog.open(plant,null,0)">写日记
              </el-button>
<!--              <el-button type="success" icon="el-icon-notebook-1" @click="">查看历史日记-->
<!--              </el-button>-->
              <a style="margin-left: 4px" :href="'#/CheckMyDiary?pid='+plant.plantId" target="_blank"><el-button type="success" icon="el-icon-notebook-1" >查看历史日记</el-button></a>
            </div>
          </el-col>
        </el-row>
       </el-col>
      </el-form>
      <span slot="footer">
        <el-button type="danger" @click="deletePlant(plant)">删除植物</el-button>
        <el-button type="primary" @click="submitForm('plantForm')">确定</el-button>
        <el-button type="info" @click="resetForm('plantForm')">返回</el-button>
    </span>
    </el-dialog>
  </div>
    <write-diary-dialog ref="writeDiaryDialog" title="植物养成日记"></write-diary-dialog>
  </div>
</template>

<script>
import {getPlantCategoryById, getPlantCategoryList} from "@/api/plantCategory";
import {deleteMyPlant, getMyPlant} from "@/api/plant";
import writeDiaryDialog from "@/components/page/my/WriteDiary"
import CheckMyDiary from "@/components/page/my/CheckMyDiary";
import {getDiary} from "@/api/diary";
export default {
  name: "CheckPlant",
  components:{
    writeDiaryDialog,
    //CheckMyDiary,
  },
  data(){
    return{
      visible:false,
      isDisabled:true,
      searchPlant:{
        plantId:'',
      },
      plant:{
        plantId:'',
        plantName:'',
        categoryId:'',
        avatar:'',
        status:'',
        description:'',
        followerNum:'',
        plantAge:'',
        createBy:'',
        createTime:'',
        updateBy:'',
        updateTime:''
      },
      uploadURL:'',
      category_str:'',
      plantCategoryList:[],
      plantStatusList:['健康','叶黄','干枯','蔫了','挂了'],



    }
  },
  created() {
    this.getCategoryList()
  },
  methods:{

    submitForm (plantform) {
      this.$refs.plantForm.validate(valid => {
        if (valid) {
          this.$confirm('确认保存吗？', '是否保存', {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            lockScroll: false,
            type: 'warning'
          }).then(() => {
            console.log('this.fileList', this.fileList)
            this.$emit('confirmData', this.plant,this.fileList)
            this.resetForm('plantForm')
          })
        }
      })
    },
    getPlantCategoryStr(id){
      getPlantCategoryById(id).then(res =>{
        console.log(res.plantCategoryName)
        this.category_str=res.plantCategoryName
      })

    },
    handleAvatarSuccess:function(res, file) {//上传头像
      console.log("plant_img",res)
      if(res != null){
        this.plant.avatar = res;
        //this.userInfoObj.head_start = 1;
      }else{
        this.$message.error('上传图片失败');
      }

    },
    beforeAvatarUpload(file) {//判断头像大小
      const isJPG = file.type == 'image/png'||file.type=='image/jpg'||file.type=='image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 1;
      // console.log(file);
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/JPEG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1MB!');
      }

      return isJPG && isLt2M;
    },
    open (item) {
      console.log("checkplant!!!")
      this.visible=true
      this.plant.plantId=item.plantId
      this.plant.plantName=item.plantName
      this.plant.status=item.status
      this.plant.avatar=item.avatar
      this.plant.categoryId=item.categoryId
      this.plant.description=item.description
      this.plant.followerNum=item.followerNum
      this.plant.createBy=item.createBy
      this.plant.updateBy=item.updateBy
      this.plant.updateTime=item.updateTime
      this.getCategoryList()
      this.getPlantCategoryStr(this.plant.categoryId)
      this.getHistoryDiary(this.plant.plantId)

    },
    routeChange:function(){
      this.getCategoryList()
    },

    getCategoryList(){
      getPlantCategoryList().then(res=>{
        console.log(res.records)
        this.plantCategoryList=res.records
      })
    },
    deletePlant(plant){
      this.$confirm('确认删除吗？', '是否删除', {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        lockScroll: false,
        type: 'warning'
      }).then(() => {
        deleteMyPlant(plant).then(res=>{
          this.resetForm(null);
          //getMyPlant(plant.createBy)
        })
      })
    },
    setDisabled(){
      if(this.isDisabled){
        this.isDisabled=false
      }else {
        this.isDisabled=true
      }
    },
    resetForm (plantForm) {
      this.$nextTick(() => {
        this.$refs.plantForm.clearValidate()
      })
      this.item = {}
      this.visible = false
    }
  }
}
</script>

<style scoped>

</style>